<!-- 在网页中引入 Vue.js 库 要放在第一行 -->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<div class="container" id="app">
    <h1>倒计时器</h1>
    <div class="input-group">
        <!-- 输入小时 -->
        <input type="number" v-model="inputH" placeholder="小时" min="0" class="time-input" />
        <label>时</label>
        <!-- 输入分钟 -->
        <input type="number" v-model="inputM" placeholder="分钟" min="0" class="time-input" />
        <label>分</label>
        <!-- 输入秒 -->
        <input type="number" v-model="inputS" placeholder="秒" min="0" class="time-input" />
        <label>秒</label>
    </div>
    <div class="button-group">
        <!-- 设置倒计时按钮 -->
        <button @click="setTimer" class="btn">设置倒计时</button>
        <!-- 开始倒计时按钮，只有在设置了时间后才能点击 -->
        <button @click="startTimer" :disabled="!isTimerSet" class="btn"
            :class="{ disabled: !isTimerSet }">开始倒计时</button>
    </div>
    <!-- 显示当前计时 -->
    <p v-if="!isTimerEnd" class="timer-display">计时: {{ h }}时 {{ m }}分 {{ formatS }}秒</p>
    <p v-else class="timer-display">计时结束</p>
</div>
<script>
    const { createApp, ref, watch, computed } = Vue //来从 Vue.js 库中解构出一些常用的 API

    // createApp 是 Vue 3 中的一个函数，用于创建一个新的 Vue 应用程序实例。
    //setup 是一个组件选项，定义了组件的逻辑部分，使用了 Vue 3 的 Composition API(组合式API)。
    createApp({
        setup() {
            // 定义响应式变量
            const h = ref(0)  // 小时
            const m = ref(0)  // 分钟
            const s = ref(0)  // 秒
            const inputH = ref(0)  // 用户输入的小时
            const inputM = ref(0)  // 用户输入的分钟
            const inputS = ref(0)  // 用户输入的秒
            const timer = ref(null)  // 定时器的引用
            const isTimerSet = ref(false)  // 标记是否设置了倒计时
            const isTimerEnd = ref(false) //标记是否计时结束

            // 设置倒计时时间的函数
            const setTimer = () => {
                h.value = inputH.value  // 设置小时
                m.value = inputM.value  // 设置分钟
                s.value = inputS.value  // 设置秒
                isTimerSet.value = true  // 标记为已设置
                isTimerEnd.value = false //计时未结束
                if (timer.value) clearInterval(timer.value);  // 清除旧的定时器
            }

            // 开始计时的函数
            const startTimer = () => {
                if (timer.value) clearInterval(timer.value);  // 清除旧的定时器
                // 设置新的定时器
                timer.value = setInterval(() => {
                    s.value--;  // 每秒减少秒数
                }, 1000); // 每隔1000毫秒更新一次
            }

            // 侦听秒的变化
            watch(s, (newSeconds) => {
                if (newSeconds < 0) {  // 如果秒数小于0
                    s.value = 59;  // 重置秒数为59
                    m.value--;  // 分钟减少1
                }
            })
            // 侦听分的变化
            watch(m, (newMinutes) => {
                if (newMinutes < 0) {  // 如果分钟数小于0
                    m.value = 59;  // 重置分钟数为59
                    h.value--;  // 小时减少1
                }
            })
            // 侦听小时的变化
            watch(h, (newHours) => {
                if (newHours < 0) {
                    h.value = 0
                    // 倒计时结束时播放声音
                    clearInterval(timer.value);  // 清除定时器
                    endSound();  // 播放声音
                    isTimerEnd.value = true
                }
            })

            // 使用计算属性把秒格式化
            const formatS = computed(() => {
                return s.value < 10 ? '0' + s.value : s.value;  // 如果秒数小于10，前面补0
            });

            //计时结束
            const endSound = () => {
                isTimerSet.value = false
            }

            //以下返回一个对象，其中包含了组件中定义的所有响应式状态、方法和计算属性。
            //这些返回的属性和方法可以在模板中直接使用。
            return {
            //以下是变量
            h,
            m,
            s,
            inputH,
            inputM,
            inputS,
            timer,
            isTimerSet,
            isTimerEnd,
            //以下是函数跟计算属性
            setTimer,
            startTimer,
            formatS,
            endSound
            }
        }
    }).mount('#app') //// 将 Vue 应用挂载到 id 为 app 的元素上
</script>

<style>
    .container {
        max-width: 400px;
        /* 最大宽度 */
        margin: auto;
        /* 居中 */
        text-align: center;
        /* 文本居中 */
        padding: 20px;
        /* 内边距 */
        border: 2px solid #4992c3;
        /* 边框 */
        border-radius: 10px;
        /* 圆角边框 */
        background-color: #f9f9f9;
        /* 背景颜色 */
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        /* 阴影效果 */
    }

    h1 {
        margin-bottom: 20px;
        /* 底部间距 */
        color: #4992c3;
        /* 文字颜色 */
    }

    .input-group {
        margin-bottom: 20px;
        /* 底部间距 */
    }

    .time-input {
        width: 60px;
        /* 输入框宽度 */
        padding: 5px;
        /* 内边距 */
        margin: 0 5px;
        /* 左右间距 */
        border: 1px solid #4992c3;
        /* 边框 */
        border-radius: 5px;
        /* 圆角 */
        text-align: center;
        /* 文本居中 */
    }

    .button-group {
        margin-bottom: 20px;
        /* 底部间距 */
    }

    .btn {
        background-color: #4992c3;
        /* 按钮背景色 */
        color: white;
        /* 按钮文字颜色 */
        border: none;
        /* 无边框 */
        padding: 10px 20px;
        /* 按钮内边距 */
        border-radius: 5px;
        /* 圆角 */
        cursor: pointer;
        /* 鼠标光标为手型 */
        transition: background-color 0.3s;
        /* 背景颜色过渡 */
    }

    .btn:hover {
        background-color: #3f7da2;
        /* 悬停时的背景颜色 */
    }

    .disabled {
        background-color: #ccc;
        /* 禁用状态的背景颜色 */
        cursor: not-allowed;
        /* 鼠标光标为禁止 */
    }

    .timer-display {
        font-size: 1.2em;
        /* 字体大小 */
        margin-top: 15px;
        /* 上边距 */
    }
</style>